import React, { useEffect, useState } from "react";
import './index.less'

export interface MirrorButtonProps {
	children?: any,
	onClick?: ()=>void,
	style?: object,
	width?:string | number,
	height?:string | number
}

const MirrorButton = (props: MirrorButtonProps) => {
	const [buttonPressed, setButtonPressed] = useState(false)
	useEffect(() => {
		navigator.mediaDevices.getUserMedia({
			video: true,
			audio: false,
		}).then((stream) => {
			const video = document.getElementById('video');
			video.srcObject = stream;
			video.onloadedmetadata = () => {
				video.play();
			};

		}).catch(e => {
			console.log(e)
		})
		

	}, [])

	const onClick = () => {
		props.onClick && props.onClick()
	}

	const [sty,setSty] = useState({
		width: '210px',
    height: '40px',
	})
	return (
		<div
			onClick={onClick}
			className={`button-wrap ${buttonPressed ? "pressed" : null}`}
			style={{width:props.width?`${props.width}px`:'',height:props.height?`${props.height}px`:''}}
		>
			<div
				className={`button ${buttonPressed ? "pressed" : null}`}
				onPointerDown={() => setButtonPressed(true)}
				onPointerUp={() => setButtonPressed(false)}
			>
				<video id="video" style={{width:props.width?`${props.width}px`:'',height:props.height?`${props.height}px`:''}} />
			</div>
			<div className="text">{props.children}</div>
		</div>
	)
}
export default MirrorButton